<template>
<!--  搜索框-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="产品型号">
      <el-input v-model="sumData.typeName" placeholder="产品型号" clearable />
    </el-form-item>
    <el-form-item label="颜色">
      <el-select
          v-model="sumData.colorId"
          placeholder="全部"
          clearable
      >
        <el-option v-for="c in formInline.colors" :key="c.colorId" :label="c.name" :value="c.colorId" />
      </el-select>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select
          v-model="sumData.bid"
          placeholder="全部"
          clearable
      >
        <el-option v-for="c in formInline.brands" :key="c.gid" :label="c.name" :value="c.gid" />
      </el-select>
    </el-form-item>
    <el-form-item label="分类">
      <el-select
          v-model="sumData.cid"
          placeholder="全部"
          clearable
      >
        <el-option v-for="c in formInline.categories" :key="c.cid" :label="c.name" :value="c.cid" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
  </el-form>
<!--  表格-->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id"/>
    <el-table-column prop="cid" label="分类">
    <template #default="t">
      {{t.row.categoryName}}
    </template>
    </el-table-column>
    <el-table-column prop="bid" label="品牌">
      <template #default="t">
        {{t.row.bname}}
      </template>
    </el-table-column>
    <el-table-column prop="typeName" label="型号"/>
    <el-table-column prop="colorId" label="颜色">
      <template #default="t">
        {{t.row.colorName}}
      </template>
    </el-table-column>
  </el-table>
  <!--分页  -->
  <div class="demo-pagination-block" v-if="tableData">
    <el-pagination
        v-model:current-page="sumData.currentPage"
        v-model:page-size="sumData.pageSize"
        :page-sizes="[5, 10, 20, 30]"
        size="large"
        :disabled="disabled"
        background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {onActivated, onMounted, reactive, ref, toRef, toRefs, watch} from "vue";
import {goodsDelById, goodsFindAll, goodsSave} from "@/api/brand";
import {ElMessage} from "element-plus";
import store from "@/store";
import {productFindAll} from "@/api/product";

const formInline = reactive({
  colors: [],
  brands: [],
  categories:[]
})
// 分页
const background = ref(false)
const disabled = ref(false)
const total = ref(100)
const sumData = reactive({
  currentPage:1,
  pageSize:5,
  typeName: '',
  colorId:'',
  cid:'',
  bid:'',
})
const handleSizeChange = (number) => {
  sumData.pageSize = number
  loadAll(sumData)
}
const handleCurrentChange = (number) => {
  sumData.currentPage = number
  loadAll(sumData)
}
const onSubmit = () => {
  loadAll(sumData)
}

const tokens = ref()
const tableData = ref()
function loadAll(data) {
  productFindAll(data)
      .then(res => {
        let {success, msg, data} = res
        if (success) {
          tableData.value = data.product
          sumData.currentPage = data.current
          total.value = data.total
          formInline.colors = data.colors
          formInline.brands = data.brands
          formInline.categories = data.categories
        } else {
          ElMessage.error(msg)
        }
      }).catch(e => {
    ElMessage.error(e)
  })
}

onMounted(() => {
  loadAll(sumData)
})

</script>
<style>
.demo-pagination-block {
  text-align: right;
  padding-right: 20px;
  padding-top: 20px;
}
</style>
